<template>
  <view class="pages">
    <view class="user-info w100">
      <view class="avatar">
        <u-avatar v-if="userInfo.avatar" size="146" :src="userInfo.avatar"></u-avatar>
        <u-icon v-else :size="80" color="#ccc" name="account-fill"></u-icon>
      </view>
      <view class="info" v-if="islogin">
        <view class="name">
          <span>{{userInfo.realname || '微信用户'}}</span>
          <template v-if="islogin">
            <u-tag v-if="userInfo.realstatus == 0" :text="statusParsing(userInfo.realstatus)" size="mini"
              shape="circle"></u-tag>
            <u-tag v-else :text="statusParsing(userInfo.realstatus)" size="mini" shape="circle"
              :type="statusTypeParsing(userInfo.realstatus)"></u-tag>
          </template>
        </view>
        <view class="mobile">{{phoneNuberConvert(userInfo.mobile)}}</view>
        <view class="company">{{userInfo.company_name}}</view>
      </view>
      <view class="info" v-else @tap="openLogin">
        <view class="name">未登录</view>
        <view class="mobile">************ </view>
      </view>

    </view>
    <view class="user-menu-wrap w100">
      <view class="user-menu">
        <view class="item" v-for="item in menus" @click="$to(item.path)">
          <image :src="'/static/my/'+item.icon"></image>
          <text>{{item.label}}</text>
          <u-icon :size="28" color="#ccc" name="arrow-right"></u-icon>
        </view>
      </view>
    </view>
    <LoginModal ref="isLoginModal" @tapLogin="reload" />
  </view>
</template>
<script>
  import LoginModal from '@/components/LoginModal'
  export default {
    components: {
      LoginModal
    },
    data() {
      return {
        userInfo: {},
        islogin: false, //是否登录
        statusText: ['未实名', '审核中', '已实名', '实名失败'],
        statusType: ['', 'warning', 'success', 'error'],
        menus: [{
          label: '实名认证',
          icon: 'real.png',
          path: '/pages/my/authentication/realname'
        }, {
          label: '收款账号',
          icon: 'account.png',
          path: '/pages/my/paymentAccount/index'
        }, {
          label: '账号设置',
          icon: 'setting.png',
          path: '/pages/my/userSetting/index'
        }, {
          label: '关于我们',
          icon: 'about.png',
          path: '/pages/my/about/index'
        }],
      }
    },
    onShow() {
      // uni.removeStorageSync('token')
      this.initData()
    },
    methods: {
      // 手机号脱敏
      phoneNuberConvert(number) {
        if (!number) return "";
        let pat = /(\d{3})\d*(\d{4})/;
        let result = number.replace(pat, "$1***$2");
        return result;
      },
      initData() {
        const token = uni.getStorageSync('token')
        this.islogin = token && token != '' ? true : false
        if (!this.islogin) return
        this.getUserInfo()
      },
      async getUserInfo() {
        await this.$http('/user/userinfo').then(res => {
          this.userInfo = res
          uni.setStorageSync('realStatus', res.realstatus)
        })
      },
      // 实名状态
      statusParsing(status) {
        return this.statusText[status]
      },
      // 实名状态颜色
      statusTypeParsing(status) {
        return this.statusType[status]
      },
      openLogin() {
        this.$refs.isLoginModal.open();
        // if(this.islogin)
        // this.showLogin = true
      },
      // 登录后刷新数据
      reload() {
        this.initData()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .user-info {
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 56rpx 38rpx 56rpx 54rpx;
    box-sizing: border-box;

    .avatar {
      min-width: 146rpx;
      height: 146rpx;
      background-color: #eee;
      border-radius: 73rpx;
      display: flex;
      align-items: center;
      justify-content: center;

    }

    .info {
      width: 550rpx;
      padding: 0 29rpx 0 39rpx;
      color: #56585c;

      .name {
        line-height:68rpx;
        font-size: 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .mobile {
        padding: 10rpx 0;
      }
    }
  }

  .user-menu-wrap {
    padding: 16rpx;
    box-sizing: border-box;
  }

  .user-menu {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 16rpx 38rpx;

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 0;

      image {
        width: 40rpx;
        height: 40rpx;
      }

      text {
        width: 530rpx;
        font-size: 28rpx;
        color: #666;
      }
    }
  }
</style>
